<template>
	<app-page>
		<wd-img-cropper @imgloaderror="imgloaderror" v-model="show" :img-src="src" @confirm="handleConfirm"
			@cancel="handleCancel"> </wd-img-cropper>
		<wd-config-provider :theme="theme">
			<view class="container">
				<wd-cell-group custom-class="cell">
					<wd-cell title="修改个人信息" is-link>
						<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<wd-img width="45px" height="45px" :src="imgSrc" />
						</button>
					</wd-cell>
					<wd-cell title="个人昵称">
						<input type="nickname" @blur="nameInput" custom-class="custom-class-name"
							:placeholder="userStore.realname" v-model="name" no-border />
					</wd-cell>
					<wd-cell title="个人简介" vertical>
						<!-- <wd-textarea auto-height v-model="introduct" :placeholder="introduct||'请输入描述'" /> -->
						<dd-editor v-model="introduct" :uploadImg="uploadFile"
							:placeholder="introduct||'请输入简介'"></dd-editor>
					</wd-cell>
					<wd-cell title="个人描述" vertical>
						<dd-editor v-model="desc" :uploadImg="uploadFile" :placeholder="desc||'请输入描述'"></dd-editor>
					</wd-cell>
				</wd-cell-group>
				<view class="submit-btns">
					<wd-button type="success"
						custom-class="wd-button-custom-class-my-success wd-button-custom-class-w100"
						@click="submit">提交</wd-button>
				</view>
			</view>
		</wd-config-provider>
	</app-page>
</template>

<script lang="ts">
	import { defineComponent, ref, watch } from 'vue';
	import { uploadImgFile } from "@/api/index"
	import { useUserStore } from "@/store";
	import { upprofile } from "@/api/index"

	export default defineComponent({
		name: '',
		setup(props, ctx) {
			const userStore = useUserStore();
			// 日间light、夜间dark主题
			const theme = ref('light');
			const src = ref<string>('')
			const imgSrc = ref<string>('')
			const show = ref<boolean>(false)
			const name = ref('')
			const introduct = ref<string>('')
			const desc = ref<string>('')
			watch(() => userStore.realname, (nVal, oVal) => {
				if (nVal !== name.value) {
					name.value = nVal;
				}
			}, {
				deep: true,
				immediate: true,
			})
			watch(() => userStore.head, (nVal, oVal) => {
				if (nVal !== imgSrc.value) {
					imgSrc.value = nVal;
				}
			}, {
				deep: true,
				immediate: true,
			})
			watch(() => userStore.desc, (nVal, oVal) => {
				if (nVal !== desc.value) {
					desc.value = nVal;
				}
			}, {
				deep: true,
				immediate: true,
			})
			watch(() => userStore.introduct, (nVal, oVal) => {
				if (nVal !== introduct.value) {
					introduct.value = nVal;
				}
			}, {
				deep: true,
				immediate: true,
			})
			const submit = () => {
				upprofile({
					head: imgSrc.value,
					realname: name.value || userStore.realname,
					nickname: name.value || userStore.realname,
					introduct: introduct.value || userStore.introduct,
					desc: desc.value || userStore.desc,
					sex: 1, // 性别，1为男，2为女，0为未知，默认为1
					tel: userStore.username, // 电话号码，默认为当前用户电话号码
				}).then(res => {
					userStore.getUserInfo();
					uni.$wdToast.show("修改成功")
				});
			}
			const nameInput = (e) => {
				console.log(e)
				name.value = e.detail.value;
			}
			const onChooseAvatar = (e) => {
				const {
					avatarUrl
				} = e.detail
				console.log(avatarUrl);
				// const tempFilePaths = res.tempFilePaths[0];
				src.value = avatarUrl;
				show.value = true;
				// 选择图片上传
				// uni.chooseImage({
				// 	count: 1,
				// 	success: (res) => {
				// 		const tempFilePaths = res.tempFilePaths[0];
				// 		src.value = tempFilePaths;
				// 		show.value = true;
				// 	}
				// })
			};
			const openUpload = () => {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths[0];
						src.value = tempFilePaths;
						show.value = true;
					}
				})
			}
			const handleConfirm = async (event) => {
				const { tempFilePath } = event
				uni.$wdToast.loading("上传中")
				const res : any = await uploadImgFile(tempFilePath);
				imgSrc.value = res.data.src;
				uni.$wdToast.close();
				console.log('确认', res, event, imgSrc.value)
			}
			function imgLoaderror(res) {
				console.log('加载失败', res)
			}
			function imgLoaded(res) {
				console.log('加载成功', res)
			}
			function handleCancel(event) {
				console.log('取消', event)
			}
			const imgloaderror = () => {
				console.log('加载失败')
			}
			return {
				theme,
				src,
				name,
				introduct,
				desc,
				imgSrc,
				show,
				openUpload,
				handleConfirm,
				imgLoaderror,
				imgLoaded,
				handleCancel,
				imgloaderror,
				submit,
				onChooseAvatar,
				nameInput,
				uploadImgFile,
				userStore
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background-color: #f2f2f2;
	}

	.container {
		position: relative;
		padding: 24rpx;

		.avatar-wrapper {
			background-color: transparent !important;

			float: right;
			padding: 0;

			margin: 0;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}

		.avatar-wrapper::after {
			border: 0 !important;
		}

		/deep/.wd-cell__wrapper {
			align-items: center;
		}

		/deep/.wd-cell__body {
			align-items: center;
		}

		/deep/.is-vertical {
			.wd-cell__value {
				width: 100%;
			}
		}

		.cell {
			border-radius: 10rpx;
			overflow: hidden;
		}

		.custom-class-name {
			text-align: right;
		}

		:deep(.wd-cell__right) {
			margin-top: 0 !important;

		}

		:deep(.wd-textarea) {
			padding: 10rpx 0;
		}

		.submit-btns {
			width: calc(100%);
			margin-top: 24rpx;
		}
	}
</style>